<template>
  <div class="box">
    <header class="tou">
      <van-search v-model="value" show-action placeholder="请输入搜索关键词"  @search="onSearch">
        <template #left>
          <van-icon name="arrow-left" style="font-size: 20px" @click="$router.go(-1)" />
        </template>
        <template #action>
          <van-icon name="search" style="font-size: 20px" />
        </template>
      </van-search>
    </header>
    <main class="zhong">
        <van-empty v-if="list.length==0"  image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"  image-size="80"  description="没有找到该商品，换个词搜搜吧"/>
      <van-card v-else v-for="item in list" :key="item.id" :price="item.price" :desc="item.desc" :title="item.title" :thumb="item.image" @click="$router.push('/detail/'+item.id)"/>
    </main>
  </div>
</template>
<script setup>
import request from "@/utils/request";
import {ref,onMounted} from 'vue';
const value = ref("");
const list=ref([]);
const onSearch=()=>{
    request.get('/search',{
        params:{value:value.value}
    }).then(res=>{
        if(res.data.code==200){
            list.value=res.data.data;
        }
    })
}
onMounted(()=>{
    onSearch();
})
</script>